<template>
    <div>
        <h3 class="mb-3" style="user-select: none">快捷键设置</h3>

        <div v-for="[name, item] in shortcut.all" :key="name">
            <key-input
                :label="item.description"
                :model-value="item.shortcut"
                @update:model-value="setShortcut(name, $event)"
            ></key-input>
        </div>
    </div>
</template>

<script setup lang="ts">
import useShortcutStore from "@/store/shortcut";
import KeyInput from "@/components/public/keyboard/KeyInput.vue";
import { injectMessageState } from "@/lib/view";
import type { ShortcutState } from "@/lib/keyboard";

const shortcut = useShortcutStore();

const messageState = injectMessageState();

/**
 * 设置快捷键
 * @param name 快捷键名称
 * @param newShortcut 新的快捷键
 */
async function setShortcut(name: string, newShortcut: ShortcutState) {
    const res = await shortcut.replace(name, newShortcut);
    if (!res) {
        messageState.visible = true;
        messageState.text = "快捷键设置失败";
    }
}
</script>
